/* 全局 */
div{
    display:block;
}
body{
    width:100%;
    height:100%;
    font-size:12px;
    color:#333;
    overflow: hidden;
}
/* m-bar */
.bar{
    height:617px;
    position:relative;
    zoom:1;
}

.m-bar{
    min-height:700px;
    width:980px;
    margin:0 auto;
    background:#fff;
    border:1px solid #d3d3d3;
    border-width:0 1px;
}

/* 歌单区域 */
.right{
    padding-bottom:50px;
    padding-top:40px;
    float:left;
    width:240px;
    position:fixed;
    /* 适配高度使用弹性盒子 */
    zoom:1;
    border-right:1px solid #d3d3d3;
    border-width:0 1px;
}

.n-lst{
    margin-top:5px;  
}

.title{
    padding: 0 10px 2px 15px;
    font-size: 14px;
    color: #000;
    margin: 0;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.title .btn{
    width: 52px;
    height: 22px;
    float:right;
    background:url(../images/pages/mysong/add-right.png);
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.title .btn:hover{
    cursor: pointer;
    background:url(../images/pages/mysong/add-right-hover.png);
}

.title .btn p{
    font-size:12px;
    float:right;
    display:block;
    margin-right:6px;
    margin-top:2px;
    font-weight:400;
}

.rtitle{
    cursor:pointer;
    position:relative;
    zoom:1;
    padding: 0 10px 12px 0px;
    font-size: 14px;
    color: #000;
    font-weight:bold;
}

.tri,.tri1{
    border-color: #ccc transparent transparent;
    border-style: solid dashed dashed;
    border-width: 8px 7px 0;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px 0 5px;
    cursor: pointer;
    font-size: 0;
    height: 0;
    line-height: 0;
    font-style: normal;
    text-align: left;
}

.sup{
    display: inline-block;
    width: 8px;
    height: 8px;
    background-size: cover;
    position: absolute;
    cursor: pointer;
    margin-top:-3px;
}

.mns{
    display: inline-block;
    width: 10px;
    cursor: pointer;
    font-weight:bold;
    padding-left:7px;
}

.flag{
    padding: 0;
    margin: 0;
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: -40px;
    display: block;
    clear: both;
}

.flag-n{
    position: relative;
    zoom: 1;
    height: 42px;
    padding: 6px 0 6px 20px;
    cursor: pointer;
    vertical-align: middle;
    list-style: none;
    margin: 0;
    display: list-item;
    z-index:10;
    text-align: -webkit-match-parent;
}

.flag-n:hover{
    background:rgb(241, 241, 241);
}

.fl1{
    background:rgb(222, 222, 222);
}

.fl1:hover{
    background:rgb(222, 222, 222);
}

.flag-n:hover .btns,
.flag-n:hover .btns1,
.flag-n:hover .btns2,
.flag-n:hover .btns3,
.flag-n:hover .btns4,
.flag-n:hover .btns5{
    visibility: visible;
}

.item{
    padding-left: 50px;
    cursor: pointer;
    vertical-align: middle;
    text-align: -webkit-match-parent;
}

.item-left{
    display: inline;
    float: left;
    margin-left: -50px;
    overflow-x: hidden;
    width: 40px;
    height:40px;
    vertical-align: middle;
}

.l1{
    background:url(../images/pages/mysong/song-s.jpg);
}
.l2{
    background:url(../images/pages/mysong/t-2.jpg);
}
.l3{
    background:url(../images/pages/mysong/t-1.jpg);
}
.l4{
    background:url(../images/pages/mysong/t-3.jpg);
}
.l5{
    background:url(../images/pages/mysong/t-4.jpg);
}
.l6{
    background:url(../images/pages/mysong/t-5.jpg);
}

.name{
    width: 150px;
    overflow: hidden;
    margin-top: 2px;
    margin-bottom: 8px;
    vertical-align: middle;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    padding: 0;
    margin: 0;    
}

.itemtitle{
    white-space: nowrap;
    color: #000;
    outline: none;
    cursor: pointer;
    text-decoration: none;    
}

.songnum{
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
    margin-block-start: 7px;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;    
}

.btns,.btns1,.btns2,.btns3,.btns4,.btns5{
    display:flex;
    height:40px;
    margin-top:-54px;
    align-items: flex-end;
    padding-left:190px;
    visibility: hidden;    
}

.btns .edit,.btns .del,
.btns1 .edit1,.btns1 .del1,
.btns2 .edit2,.btns2 .del2,
.btns3 .edit3,.btns3 .del3,
.btns4 .edit4,.btns4 .del4,
.btns5 .edit5,.btns5 .del5{
    display:block;
    /* float:right; */
    position: fixed;
    width:13px;
    min-width: 13px;
    height:13px;
    margin:0 5px;
}

.btns1 .edit1{
    float: none;
    position: relative;
    display: inline;
    right: 20px;    
}

.btns1 .edit1{
    background:url(../images/pages/mysong/bj.png);
}
.btns1 .edit1:hover{
    background:url(../images/pages/mysong/bj-hover.png);
}
.btns1 .del1,
.btns2 .del2,
.btns3 .del3,
.btns4 .del4,
.btns5 .del5{
    background:url(../images/pages/mysong/del.png);
}
.btns1 .del1:hover,
.btns2 .del2:hover,
.btns3 .del3:hover,
.btns4 .del4:hover,
.btns5 .del5:hover{
    background:url(../images/pages/mysong/del-hover.png);
}

/* 歌曲区域 */
.left{
    position: relative;
    zoom: 1;
}

.both{
    position: relative;
    zoom: 1;    
}

.top{
    /* border:1px solid blue; */
    border-bottom:2px solid rgb(185, 0, 0);
    width:738px;
    height:330px;
    float:right;
    display:block;
}

.topblock::after{
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
}

.leftimg{
    width:200px;
    height:200px;
    float: left;
    position: relative;
    display: inline;
    margin: 0 -220px 0 0;
    /* border:1px solid blue; */
}
    
.cnt{
    float:right;
    width:100%;    
}

.cnt-type{
    z-index:10;
    position:relative;
    padding-top:-2px;
    display:block;
    float:left;
    background:url(../images/pages/mysong/type.png);
}

.cnt-sup{
    z-index:11;
    margin-left:60px;
}

.cnt-title{
    margin-left:200px;
    margin-top:-160px;
}

.hd{
    position: relative;
    margin: 0 0 12px;
    margin-left:60px;
    margin-top:-40px;
    width:200px;
    float:left;
}

.leftimg .msk{
    padding:4px 4px;
}

.leftimg{
    border:0.5px solid rgb(177, 177, 177);
    width:208px;
    height:208px;
    margin-left:38px;
    margin-top:40px;
}

.cnt-type{
    position: relative;
    top: 3px;
    margin-right: 6px;
    width: 54px;
    height: 24px;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    zoom: 1;
    font-style: normal;
    text-align: left;
    font-size: inherit;
}

.cnt-sup{
    /* 注册商标 */
    margin-left:33px;
    position:absolute;
    width:2px;
    height:2px;
    z-index:20;
    display:flex;
    color:#fff;    
    font-weight:100;
}

.thide{
    line-height: 24px;
    font-size: 20px;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    margin:0;
    padding:0;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.user{
    float:left;
    display:flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    margin-left:60px;
}

.userimg{
    display:flex;
    padding-right:15px;
}

.userimg img{
    width:38px;
    height:38px;
}

.user a{
    text-decoration: none;    
    display:block;
    margin-right:10px;
}
.user a:hover{
    text-decoration: underline;
}

.user label{
    color:rgb(137, 137, 137);
}

/* 用户按钮 */
.cnt-btns{
    display:block;
    position:fixed;
    float:left;
    margin-left:60px;
    margin-top:60px;    
}

.player{
    display:block;
    float:left;
    position:relative;
    cursor: pointer;
    width:100px;
}

.player .playerleft{
    width:80px;
    height:30px;
    background:rgb(60, 118, 211);
    border-radius:2px;
    border-top-right-radius: 0%;
    border-bottom-right-radius: 0%;
    border-right:0.5px solid #333;
}

.playerleft img{
    width:34px;
    height:30px;
    border-radius:2px;
    float:left;
}

.playerleft label{
    margin-right:15px;
    margin-top:8px;
    float:right;
    display:block;
    position:relative;
    color:#fff;
}

.leftbg{
    width:69px;
    height:30px;
    border-radius:2px;
    cursor: pointer;
    position:fixed;
    display: flex;
}

.leftbg:hover{
    background:rgba(204,204,204,30%);
}

.player .playerright{
    width:31px;
    height:31px;
    float:right;;
    margin-top:-30px;
    margin-right:5px;
    background:url(../images/pages/mysong/add.png);
}

.cnt-btns{
    float:right;
    display:flex;
}

.cnt-btns button{
    width:60px;
    height:28px;
    font-size:12px;
    margin:0 2px;
    padding:0;
    margin-top:1px;
    cursor: pointer;
    border:1px solid rgb(76, 76, 76);
    border-bottom:1px solid #999;
    border-radius:4px;
    text-align: right;
    color:#333;
    padding-right:5px;
}

.add div,
.share div,
.dwn div,
.pl div{
    width:16px;
    height:15px;
    display:block;
    position:fixed;
    margin-left:6px;
    margin-top:2px;
}

.share div{
    width:14px;
    height:15px;
}

.pl div{
    width:20px;
    height:15px;
}

.dwn div{
    width:14px;
    height:15px;
}

.add div{
    background:url(../images/pages/mysong/songadd-hover.png);
}
.share div{
    background:url(../images/pages/mysong/songshare-hover.png);
}
.pl div{
    background:url(../images/pages/mysong/pl.png);
}
.dwn div{
    background:url(../images/pages/mysong/dwn-hover.png);
}

/* 底部底部标题栏 */
.toptitle{
    width:100%;
    height:30px;
    margin-top:40px;
}

.toptitle-left{
    float:left;
    display:flex;
    justify-content: center;
    align-items: center;
}

.toptitle-left p{
    display:block;
    margin-top:4px;
    float:left;
}

.toptitle-left .h1{
    float:left;
    font-size:20px;
    font-weight: 400;
    display:flex;
    margin:0 30px;
}

.toptitle-right{
    float:right;
    margin-right:10px;
}

.toptitle-right label{
    color:rgb(146, 1, 1);
    font-weight:bold;
}

/* 歌曲部分 */
.songtable{
    /* border:1px solid blue; */
    border-bottom:1px solid #d3d3d3;
    width:739px;
    float:right;
    border-collapse: collapse;
    border-spacing: 0;
}

.songtable tr:hover .bothbar{
    visibility:visible;
}
.songtable tr:hover .bothbar label{
    visibility: hidden;
}

.songtable td{
    /* border:1px solid blue; */
    height:30px;
    padding:0;
}

.tabletitle{
    height:27px;
    background:#f4f4f4;
    background-image: linear-gradient(to bottom,transparent,rgba(211,211,211,10%));    
}

.tabletitle td{
    border-bottom:1.5px solid #d3d3d3;
}

.songtable label{
    padding-left:8px;
    z-index:30;
    visibility: visible;
    cursor:pointer;
}

.songtable label:hover{
    text-decoration: underline;
}

.songtable .t1{
    background:rgb(247, 247, 247);
}

.songtag label{
    padding-left:15px;
    color:rgb(140, 140, 140);
}

.ply{
    width:17px;
    height:17px;
    float:left;
    margin-left:10px;
    background:url(../images/pages/mysong/ply.png);
    cursor:pointer;
}

.ply:hover{
    background:url(../images/pages/mysong/ply-hover.png);
}

.both{
    height:30px;
    width:108px;
    float:right;
    z-index:31;
}

.bothbar{
    visibility: hidden;
}

.both,.add-1,.songadd,.songshare,.songdwn,.del{
    float:right;
    display:block;
    width:15px;
    height:15px;    
}
.both{
    background:transparent;
    border:none;
}

.add-1{
    width:14px;
    height:14px;
    margin-right:90px;
    background:url(../images/pages/mysong/add-1.png);
    cursor: pointer;
}
.add-1:hover{
    margin-right:90.5px; 
    background:url(../images/pages/mysong/add-1-hover.png);
}
.songadd{
    width:16px;
    height:15px;
    margin-right:68px;
    margin-top:-14px;
    background:url(../images/pages/mysong/songadd.png);
    cursor:pointer;
}
.songadd:hover{
    background:url(../images/pages/mysong/songadd-hover.png);
}
.songshare{
    width:14px;
    height:14px;
    margin-right:46px;
    margin-top:-15px;
    background:url(../images/pages/mysong/songshare.png);
    cursor:pointer;
}
.songshare:hover{
    background:url(../images/pages/mysong/songshare-hover.png);
}
.songdwn{
    width:15px;
    height:14px;
    margin-right:23px;
    margin-top:-15.5px;
    background:url(../images/pages/mysong/dwn.png);
    cursor: pointer;
}
.songdwn:hover{
    background:url(../images/pages/mysong/dwn-hover.png);
}
.del{
    width:14px;
    height:14px;
    margin-top:-15px;
    background:url(../images/pages/mysong/del.png);
    cursor:pointer;
}
.del:hover{
    background:url(../images/pages/mysong/del-hover.png);
}

.bothbar label{
    position:absolute;
}

.bothbar{
    position:relative;
}